<template>
  <svg @click="onClick()" width="64" height="52" viewBox="0 0 64 52" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="15.1394" y="5" width="41.8605" height="30" rx="8" fill="#E5436D"/>
    <rect x="7" y="5" width="41.8605" height="30" rx="8" fill="#65D1E8"/>
    <g filter="url(#filter0_d_241:3843)">
      <rect x="11.0697" y="5" width="41.8605" height="30" rx="8" fill="#181818"/>
      <rect x="11.3197" y="5.25" width="41.3605" height="29.5" rx="7.75" stroke="url(#paint0_linear_241:3843)" stroke-width="0.5"/>
    </g>
    <path d="M32.5 11C32.7761 11 33 11.2239 33 11.5V28.5C33 28.7761 32.7761 29 32.5 29H31.5C31.2239 29 31 28.7761 31 28.5V11.5C31 11.2239 31.2239 11 31.5 11H32.5Z" fill="white"/>
    <path d="M41 20.5C41 20.7761 40.7761 21 40.5 21H23.5C23.2239 21 23 20.7761 23 20.5V19.5C23 19.2239 23.2239 19 23.5 19H40.5C40.7761 19 41 19.2239 41 19.5V20.5Z" fill="white"/>
    <defs>
      <filter id="filter0_d_241:3843" x="0.0697021" y="0" width="63.8605" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dy="6"/>
        <feGaussianBlur stdDeviation="5.5"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_241:3843"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_241:3843" result="shape"/>
      </filter>
      <linearGradient id="paint0_linear_241:3843" x1="11.0697" y1="5" x2="11.0697" y2="35" gradientUnits="userSpaceOnUse">
        <stop stop-color="#CDCDCD"/>
        <stop offset="1" stop-color="#A6A6A6"/>
      </linearGradient>
    </defs>
  </svg>

</template>

<script>
export default {
  name: 'TikTokIcon',
  props: {
    click: {
      type: Function,
      require: false
    }
  },

  methods: {
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>

</style>